import React, { useEffect, FC, useRef, useState } from 'react';
import { Canvas, View } from '@tarojs/components';
import moment from 'moment';
import Taro from '@tarojs/taro';

const minProgress = 0;
const maxProgress = 100;


const FacilCanvas = ({ id, width, tintColor, showReact, color, lineWidth, progress }) => {

  const drawArc = (ctx, s, e, w, scale) => {
    const x = w / 2;
    const y = x;
    const lineW = lineWidth * scale;
    const radius = x - lineW;
    const centerReactWidth = w / 4;
    // console.log('drawArc', x, y, radius);
    ctx.clearRect(0, 0, w, w);
    ctx.fillStyle = tintColor;
    if (showReact) {
      ctx.fillRect(x - centerReactWidth / 2, y - centerReactWidth / 2, centerReactWidth, centerReactWidth);
    }
    ctx.lineWidth = lineW;
    ctx.lineCap = 'round';
    ctx.beginPath();
    ctx.strokeStyle = color;
    ctx.arc(x, y, radius, 0, Math.PI * 2, false);
    // ctx.closePath();
    ctx.stroke();

    ctx.beginPath();
    ctx.strokeStyle = tintColor;
    ctx.arc(x, y, radius, s, e, false);
    ctx.stroke();
    ctx.scale(scale, scale)
  };
  const query = Taro.createSelectorQuery()
  query.select(`#${id}`).node().exec(function (res) {
    // console.log(res);
    if (res && res[0] && res[0].node) {
      const canvas = res[0].node;
      const ctx = canvas.getContext('2d')
      const dpr = Taro.getSystemInfoSync().pixelRatio;
      // console.log('dpr', dpr);
      canvas.width = width * dpr;
      canvas.height = width * dpr;
      let startAngle = 1.5 * Math.PI, endAngle = 0;
      endAngle = progress * 2 * Math.PI + 1.5 * Math.PI;
      drawArc(ctx, startAngle, endAngle, canvas.width, dpr);
    }
  })

};

interface IProps {
  width: number;
  lineWidth?: number;
  progress: number; //0-100
  tintColor?: string;
  color?: string;
  showReact?: boolean;
  style?: any;
}

const dpr = Taro.getSystemInfoSync().pixelRatio;
const idPerfix = 'CircleProgressCanvas';


// 客访次数
const CircleProgress: FC<IProps> = ({ width, progress, style, lineWidth = 6, showReact = true, color = '#e7e7e7', tintColor = '#d81e06' }) => {
  const cId = useRef(`${idPerfix}-${moment().valueOf()}`);
  const [cv, setCv] = useState<any>(undefined);

  // useEffect(() => {
  //   setTimeout(() => {
  //     const query = Taro.createSelectorQuery()
  //     console.log('cId.current', cId.current);
  //     query.select(`#${cId.current}`).node().exec(function (res) {
  //       console.log(res);
  //       setCv(res[0].node)
  //     })
  //   }, 200);
  // }, [])

  useEffect(() => {
    setTimeout(() => {
      FacilCanvas({ id: cId.current, width: width * 2, lineWidth, showReact, tintColor, color, progress: progress / maxProgress });
    }, 200)
  })

  // useEffect(() => {
  //   const canvas = cv;
  //   if (canvas) {
  //     const w = width * 2;
  //     const ctx = canvas.getContext('2d')
  //     canvas.width = w * dpr;
  //     canvas.height = w * dpr;
  //     let startAngle = 1.5 * Math.PI, endAngle = 0;
  //     endAngle = progress * 2 * Math.PI + 1.5 * Math.PI;

  //     const x = w / 2;
  //     const y = x;
  //     const lineW = lineWidth * dpr;
  //     const radius = x - lineW;
  //     const centerReactWidth = w / 4;
  //     // console.log('drawArc', x, y, radius);
  //     ctx.clearRect(0, 0, w, w);
  //     ctx.fillStyle = tintColor;
  //     ctx.fillRect(x - centerReactWidth / 2, y - centerReactWidth / 2, centerReactWidth, centerReactWidth);
  //     ctx.lineWidth = lineW;
  //     ctx.lineCap = 'round';
  //     ctx.beginPath();
  //     ctx.strokeStyle = color;
  //     ctx.arc(x, y, radius, 0, Math.PI * 2, false);
  //     // ctx.closePath();
  //     ctx.stroke();

  //     ctx.beginPath();
  //     ctx.strokeStyle = tintColor;
  //     ctx.arc(x, y, radius, startAngle, endAngle, false);
  //     ctx.stroke();
  //     ctx.scale(dpr, dpr)
  //   }
  // }, [width, progress, lineWidth, color, tintColor, cv])

  return (
    <View style={style}>
      <Canvas type='2d' style={{ width, height: width }} id={cId.current} canvasId={cId.current}></Canvas>
    </View>
  )
};

export default CircleProgress;
